This PR enables pasting of wallet recovery phase.

This PR will utilized changes from React Polymorph Autocomplete component from here:
input-output-hk/react-polymorph#163

Todos

• Improve logic to parse pasted strings (words)
• Handle wrong words from the passphrase and break parsing of strings
• Fix js console error
• Prevent dropdown opening on deletion of the word
• Disable button on dialog opening with empty recovery phase
• Fix opening/closing of dropdown on words copy/paste

Screenshots

Testing Checklist

• Slack QA thread

Test Cases

Scenario 1: Copy and paste wallet passphrase
Given I am restoring a wallet
And I am at Recovery Phrase Step in (Restore wallet|Verify wallet phrase)
And I have the correct wallet passphrase
And I have copied the entire wallet passphrase
When I paste the wallet passphrase into the text area
And I select ‘Check Recovery Phrase’
Then it is successful

Test Report

For build 17700

Fixed issues

Issues 1 to 4 were reported here.

1 - When deleting an already entered words by using "Backspace" key we should always hide the options dropdown in case it is shown (this is reproducible in develop too)

2 - When you enter the 2nd step of the "Wallet restoration" dialog, the button "Check recovery phrase" should be disabled by default (this is reproducible in develop too):

3 - When deleting already entered words by clicking on the "x" button we should prevent the options dropdown to show (this is reproducible in develop too)

4 - When pasting recovery phrase on the "Verification of the recovery phrase" dialog, there is a JS error thrown (this does not happen in the "Wallet restoration" dialog)

5 - I was able to paste more than maximum words. See screenshot

6 - After pasting words, dropdown didn't close automatically
See video

7 - When there're extra white spaces, it seemed the remaining words were not able to be pasted
See video

8 - Sometimes it is needed to click twice in the field to successfully paste values

Review Checklist

Basics

• PR has been assigned and has appropriate labels (feature/bug/chore, release-x.x.x)
• PR is updated to the most recent version of the target branch (and there are no conflicts)
• PR has a good description that summarizes all changes
• PR has default-sized Daedalus window screenshots or animated GIFs of important UI changes:
  • In English
  • In Japanese
• CHANGELOG entry has been added to the top of the appropriate section (Features, Fixes, Chores) and is linked to the correct PR on GitHub
• Automated tests: All acceptance and unit tests are passing (yarn test)
• Manual tests (minimum tests should cover newly added feature/fix): App works correctly in development build (yarn dev)
• Manual tests (minimum tests should cover newly added feature/fix): App works correctly in production build (yarn package / CI builds)
• There are no flow errors or warnings (yarn flow:test)
• There are no lint errors or warnings (yarn lint)
• There are no prettier errors or warnings (yarn prettier:check)
• There are no missing translations (running yarn manage:translations produces no changes)
• Text changes are proofread and approved (Jane Wild / Amy Reeve)
• Japanese text changes are proofread and approved (Junko Oda)
• UI changes look good in all themes (Alexander Rukin)
• Storybook works and no stories are broken (yarn storybook)
• In case of dependency changes yarn.lock file is updated

Code Quality

• Important parts of the code are properly commented and documented
• Code is properly typed with flow
• React components are split-up enough to avoid unnecessary re-renderings
• Any code that only works in main process is neatly separated from components

Testing

• New feature/change is covered by acceptance tests
• New feature/change is manually tested and approved by QA team
• All existing acceptance tests are still up-to-date
• New feature/change is covered by Daedalus Testing scenario
• All existing Daedalus Testing scenarios are still up-to-date

After Review

• Merge the PR
• Delete the source branch
• Move the ticket to done column on the YouTrack board
• Update Slack QA thread by marking it with a green checkmark